<!-- 首页 -->
<template>
  <div class="wrap">
    <div class="video"></div>
    <div :class="!isScroll ? 'head-bg' : 'head-bg head-bg-white'">
      <div class="head">
        <div class="logo">
          <img src="../../assets/images/logo-w.png" v-if="!isScroll">
          <img src="../../assets/images/logo.png" v-if="isScroll">
        </div>
        <div class="spread pointer" @click="toggleDrawer">
          <img src="../../assets/images/spread-w.png" v-if="!isScroll">
          <img src="../../assets/images/spread.png" v-if="isScroll">
        </div>
        <div class="drawer" :class="{ open: isDrawerOpen }">
          <div class="pointer" @click="toggleDrawer">关闭</div>
        </div>
      </div>
    </div>
    <!--banner-->
    <div class="banner">
      <div class="main-txt">
        Liquid<br/>
        Cooling Master
      </div>
      <div class="sub-txt">
        <span class="blue">FBOX</span> is a leading solution provider,<br/>
        devoted to taking cooling innovation to the next level.
      </div>
      <div class="link">
        <span>Who we are</span> <img src="../../assets/images/arrow-r.png">
      </div>
      <div class="line"></div>
    </div>
    <!--innovation-->
    <div class="innovation-w">
      <div class="innovation">
        <div class="info">
          Innovation,<br/>
          Customization, and<br/>
          Global Reach<br/>
          in One Solution<br/>
        </div>
        <div class="link">
          <span>Explore Our Technology</span> <img src="../../assets/images/arrow-r.png">
        </div>
      </div>
    </div>
    <!--innovation-->
    <div class="rapid-w">
      <div class="rapid">
        <div class="tit">
          <div class="main-txt">Rapid, Reliable Production</div>
          <div class="sub-txt">Deliver for the Most Ambitious Projects.</div>
        </div>
        <div class="line"></div>
        <div class="info">
          By providing <span class="blue fontBold">stable & wide range</span> overclocking and <span class="blue fontBold">highly compatible</span> cooling solutions in various environments,<br/>
          FBOX solutions are widely deployed in North & South America and the Middle East Area.<br/><br/>
          Strength in scale, FBOX driving digital transformation for industry leading business operations.
        </div>
      </div>
    </div>
    <!--smarter-->
    <div class="smarter-w">
      <div class="smarter">
        <div class="tit">
          Smarter, Greener, COOLER<br/>
          Liquid Cooling Redefined for<br/>
          Next-Gen Performance.
        </div>
        <div class="line"></div>
        <div class="info">
          Revolutionizing high-performance computing with reliable and scalable cooling solutions,<br/>
          offering fully customizable cooling capacities and server configurations.
        </div>
      </div>
    </div>
    <!--crypto-->
    <div class="crypto-w">
      <div class="crypto">
        <div class="tit">
          From Crypto Mining<br/>
          to AI Data Centers,<br/>
          Precision Cooling Delivered.
        </div>
        <div class="line"></div>
        <div class="info">
          Excel in high temperature, humidity, dust, and salt spray environments, FBOX ensuring stable operation and significantly prolonged<br/>
          hardware lifespan. Built for reliability, we deliver unmatched durability in the harshest conditions.
        </div>
      </div>
    </div>
    <!--standard-->
    <div class="standard-w">
      <div class="standard">
        <div class="txt">
          Setting the Standard<br/>
          for Adaptability<br/>
          in Harsh Environments.
        </div>
        <div class="line"></div>
        <div class="info">
          Excel in high temperature, humidity, dust, and salt spray environments, FBOX ensuring stable operation and significantly prolonged
          hardware lifespan. Built for reliability, we deliver unmatched durability in the harshest conditions.
        </div>
      </div>
    </div>
    <!--brand-->
    <div class="brand" v-show="false">
      <div class="scroll-container">
        <div class="scroll-content" :class="{ 'scroll-animation': shouldScroll }">
          <div v-for="(item, index) in displayItems" :key="index" class="scroll-item">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <!--map-->
    <div class="map-w">
      <div class="map">
        <div class="txt">
          With years of deployment experiences, <span class="blue">FBOX’s 100KW/TANK</span> solution have proven<br/>
          the <span class="blue">reliability</span> under the most demanding environmental conditions.
        </div>
        <div class="pic"></div>
        <div class="moscow"></div>
      </div>
    </div>

  </div>
</template>

<script>


  export default {
    components: {},
    data() {
      return {
        isScroll:false,
        isDrawerOpen:false,
        items: ['MARA', 'MARA', 'MARA', 'MARA', 'MARA']
      }
    },
    computed:{
      // 判断是否需要滚动
      shouldScroll() {
        return this.items.length > 4;
      },
      // 根据是否需要滚动决定显示的内容
      displayItems() {
        return this.shouldScroll ? [...this.items, ...this.items] : this.items;
      }
    },
    mounted(){
      //页面滚动切换头部样式
      var that = this;
      window.onscroll = function() {
        var t = document.documentElement.scrollTop || document.body.scrollTop
        if (t > 40){
          that.isScroll = true
          console.log('滚动')
        } else {
          that.isScroll = false
          console.log('不滚动')
        }
      }
    },
    methods: {
      toggleDrawer(){
         this.isDrawerOpen = !this.isDrawerOpen
      }
    },
  }
</script>

<style lang="scss" scoped>
  html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
  .wrap{

  }
  .banner{
    width: 1400px;
    margin: 248px auto 160px;
    position: relative;
    z-index: 9;
    > .main-txt{
      font-weight: 500;
      font-size: 160px;
      color: #FFFFFF;
      line-height: 173px;
      text-align: left;
      font-style: normal;
    }
    > .sub-txt{
      font-size: 22px;
      color: white;
      line-height: 36px;
      text-align: left;
      font-style: normal;
      margin-top: 6px;
    }
    > .link{
      display: flex;
      align-items: center;
      margin-top: 147px;
      > span{
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 16px;
        text-align: left;
        font-style: normal;
      }
      > img{
        width: 46px;
        height: 46px;
        margin-left: 26px;
      }
    }
    > .line{
      width: 100%;
      height: 2px;
      background: #FFFFFF;
      margin-top: 40px;
    }
  }
  .innovation-w{
    padding: 280px 0 182px;
    .innovation{
      width: 1400px;
      margin: 0 auto;
      > .info{
        font-weight: 500;
        font-size: 120px;
        color: #000000;
        line-height: 120px;
        text-align: left;
        font-style: normal;
      }
      > .link{
        display: flex;
        align-items: center;
        padding-top: 92px;
        > span {
          font-weight: 400;
          font-size: 20px;
          color: #000000;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        > img{
          width: 46px;
          height: 46px;
          margin-left: 16px;
        }
      }
    }
  }
  .rapid-w{
    background: url("../../assets/images/innovation.png") no-repeat top center;
    background-size: 100% 100%;
    padding: 423px 0 182px;
    .rapid{
      width: 1400px;
      margin: 0 auto;
      > .tit{
        font-weight: 500;
        color: #FFFFFF;
        line-height: 115px;
        text-align: left;
        font-style: normal;
        > .main-txt{
          font-size: 99px;
        }
        > .sub-txt{
          font-size: 70px;
        }
      }
      > .line{
        width: 100%;
        margin: 80px 0 32px;
        height: 1px;
        background: #DCDCDC;
      }
      > .info{
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .smarter-w{
    padding: 315px 0 246px;
    .smarter{
      width: 1400px;
      margin: 0 auto;
      > .tit{
        font-weight: 500;
        font-size: 98px;
        color: #000000;
        line-height: 114px;
        text-align: left;
        font-style: normal;
      }
      > .line{
        width: 100%;
        height: 1px;
        background: #666666;
        margin: 80px 0 32px;
      }
      > .info{
        font-weight: 400;
        font-size: 20px;
        color: #000000;
        line-height: 32px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .crypto-w{
    background: url("../../assets/images/crypto.jpg") no-repeat top center;
    background-size: 100% 100%;
    padding: 315px 0 246px;
    .crypto{
      width: 1400px;
      margin: 0 auto;
      > .tit{
        font-weight: 500;
        font-size: 98px;
        color: #FFFFFF;
        line-height: 114px;
        text-align: left;
        font-style: normal;
      }
      > .line{
        width: 100%;
        height: 1px;
        background: #DCDCDC;
        margin: 80px 0 32px;
      }
      > .info{
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .standard-w{
    background: #F1F1F1;
    padding: 266px 0 242px;
    .standard{
      width: 1400px;
      margin: 0 auto;
      > .txt{
        font-weight: 500;
        font-size: 112px;
        color: #000000;
        line-height: 130px;
        text-align: left;
        font-style: normal;
      }
      > .line{
        width: 100%;
        height: 1px;
        background: #666666;
        margin: 80px 0 32px;
      }
      > .info{
        font-weight: 400;
        font-size: 21px;
        color: #000000;
        line-height: 34px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .brand{
    width: 100%;
    padding: 70px 0 84px;
  }
  .map-w{
    width: 100%;
    background: #000000;
    padding: 99px 0 139px;
    .map{
      width: 1400px;
      margin: 0 auto;
      text-align: center;
      > .txt{
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
        font-style: normal;
      }
      > .pic{
        position: relative;
        width: 1251px;
        height: 674px;
        margin-top: 80px;
        background: url("../../assets/images/map.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .moscow{
        position: absolute;
      }
    }
  }

</style>

<style>
  .scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }

  .scroll-content {
    display: inline-block;
    animation: scroll 60s linear infinite; /* 调整动画时间 */
  }

  .scroll-item {
    width: 294px;
    height: 102px;
    display: inline-block;
    margin: 0 71px; /* 调整图片间距 */
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-size: 16px;
    text-align: center;
  }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
